<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="小包编码" prop="pack_name">
        <el-input v-model="queryParams.pack_name" placeholder="请输入小包编码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="包装日期" prop="bin_time">
        <el-date-picker clearable
          v-model="queryParams.bin_time"
          type="datetime"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="请选择">
        </el-date-picker>

      </el-form-item>

      <el-form-item label="产出机台" prop="bin_eqp">
        <el-input v-model="queryParams.bin_eqp" placeholder="请输入产出机台" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">后道批次追溯</el-divider>
    <el-table v-loading="hdLoading" :data="hdResultList" border resizeable :span-method="objectSpanMethod">
      <el-table-column label="pack_name" align="center" prop="pack_name" min-width="100"/>
      <el-table-column label="bin_qty" align="center" prop="bin_qty" min-width="80"/>
      <el-table-column label="bin_eqp" align="center" prop="bin_eqp" min-width="100"/>
      <el-table-column label="bin_time" align="center" prop="bin_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.bin_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="cs_eqp" align="center" prop="cs_eqp" min-width="100"/>
      <el-table-column label="batch_id" align="center" prop="batch_id" min-width="190"/>
      <el-table-column label="wbBatch" align="center" prop="wbBatch" min-width="190"/>
      <el-table-column label="jlBatch" align="center" prop="jlBatch" min-width="190"/>
      <el-table-column label="cs_qty" align="center" prop="cs_qty" min-width="80"/>
      <el-table-column label="cs_time" align="center" prop="cs_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.cs_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="bm_eqp" align="center" prop="bm_eqp" min-width="100"/>
      <el-table-column label="bm_time" align="center" prop="bm_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.bm_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="zm_eqp" align="center" prop="zm_eqp" min-width="100"/>
      <el-table-column label="zm_time" align="center" prop="zm_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.zm_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ad_eqp" align="center" prop="ad_eqp" min-width="100"/>
      <el-table-column label="ad_time" align="center" prop="ad_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.ad_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="rc_eqp" align="center" prop="rc_eqp" min-width="100"/>
      <el-table-column label="rc_time" align="center" prop="rc_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.rc_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="lk_eqp" align="center" prop="lk_eqp" min-width="100"/>
      <el-table-column label="lk_time" align="center" prop="lk_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lk_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="lp_eqp" align="center" prop="lp_eqp" min-width="100"/>
      <el-table-column label="lp_time" align="center" prop="lp_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lp_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="bsg_eqp" align="center" prop="bsg_eqp" min-width="100"/>
      <el-table-column label="bsg_time" align="center" prop="bsg_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.bsg_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="hd_batch" align="center" prop="hd_batch" min-width="190"/>
    </el-table>
    <!-- <pagination v-show="hdTotal>0" :total="hdTotal" :page.sync="hdQueryParams.pageNum" :limit.sync="hdQueryParams.pageSize" @pagination="getHdList" /> -->

    <el-divider content-position="left">前道批次追溯</el-divider>
    <el-table v-loading="hdLoading" :data="hdResultList" border resizeable>
      <el-table-column label="hd_batch" align="center" prop="hd_batch" min-width="190"/>
      <el-table-column label="qd_batch" align="center" prop="qd_batch" min-width="190"/>
      <el-table-column label="qty" align="center" prop="qty" min-width="80"/>
      <el-table-column label="qd_bsg_eqp" align="center" prop="qd_bsg_eqp" min-width="100"/>
      <el-table-column label="qd_bin_time" align="center" prop="qd_bin_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.qd_bin_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="hp_eqp" align="center" prop="hp_eqp" min-width="100"/>
      <el-table-column label="hp_time" align="center" prop="hp_time" min-width="190">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.hp_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="qp_eqp" align="center" prop="qp_eqp" min-width="100"/>
      <el-table-column label="qp_time" align="center" prop="qp_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.qp_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="zr_eqp" align="center" prop="zr_eqp" min-width="100"/>
      <el-table-column label="qd_bm_time" align="center" prop="qd_bm_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.qd_bm_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="fl_eqp" align="center" prop="fl_eqp" min-width="100"/>
      <el-table-column label="fl_time" align="center" prop="fl_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.fl_time, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="fl_batch" align="center" prop="fl_batch" min-width="190"/>
      <el-table-column label="fl_qty" align="center" prop="fl_qty" min-width="100"/>
    </el-table>
    <pagination v-show="hdTotal>0" :total="hdTotal" :page.sync="hdQueryParams.pageNum" :limit.sync="hdQueryParams.pageSize" @pagination="getHdList" />

    <!-- 添加或修改追溯结果对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="关联ID" prop="relationId">
          <el-input v-model="form.relationId" placeholder="请输入关联ID" />
        </el-form-item>
        <el-form-item label="工序" prop="step">
          <el-input v-model="form.step" placeholder="请输入工序" />
        </el-form-item>
        <el-form-item label="设备号" prop="eqpId">
          <el-input v-model="form.eqpId" placeholder="请输入设备号" />
        </el-form-item>
        <el-form-item label="时间" prop="eventTime">
          <el-date-picker clearable v-model="form.eventTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="小包编码" prop="packName">
          <el-input v-model="form.packName" placeholder="请输入小包编码" />
        </el-form-item>
        <el-form-item label="数量" prop="qty">
          <el-input v-model="form.qty" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="批次" prop="batchId">
          <el-input v-model="form.batchId" placeholder="请输入批次" />
        </el-form-item>
        <el-form-item label="组织" prop="group">
          <el-input v-model="form.group" placeholder="请输入组织" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listResult,
    getResult,
    delResult,
    addResult,
    updateResult,
    listResult_HD
  } from "@/api/system/result";

  export default {
    name: "Result",
    data() {
      return {
        // 遮罩层
        hdLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        hdTotal: 0,
        // 追溯结果表格数据
        hdResultList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          pack_name: null,
          bin_time: null,
          bin_eqp: null
        },
        hdQueryParams: {
          pageNum: 1,
          pageSize: 20,
          pack_name: null,
          bin_time: null,
          bin_eqp: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      // this.getHdList();
    },
    methods: {
      /** 查询追溯结果列表 */
      getHdList() {
        this.hdLoading = true;
        if (null == this.queryParams.pack_name || null == this.queryParams.bin_time || null == this.queryParams.bin_eqp) {
          this.hdLoading = false;
          this.$modal.msgError("小包编码、包装日期、产出机台均不能为空！");
          return false;
        }
        this.hdQueryParams.pack_name = this.queryParams.pack_name;
        this.hdQueryParams.bin_time = this.queryParams.bin_time;
        this.hdQueryParams.bin_eqp = this.queryParams.bin_eqp;
        listResult_HD(this.hdQueryParams).then(response => {
          this.hdResultList = response.rows;
          this.hdTotal = response.total;
          this.hdLoading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          ID: null,
          relationId: null,
          step: null,
          eqpId: null,
          eventTime: null,
          packName: null,
          qty: null,
          batchId: null,
          group: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.hdQueryParams.pageNum = 1;
        this.getHdList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.ID)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加追溯结果";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const ID = row.ID || this.ids
        getResult(ID).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改追溯结果";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.ID != null) {
              updateResult(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addResult(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const IDs = row.ID || this.ids;
        this.$modal.confirm('是否确认删除追溯结果编号为"' + IDs + '"的数据项？').then(function() {
          return delResult(IDs);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/result/export', {
          ...this.queryParams
        }, `result_${new Date().getTime()}.xlsx`)
      },
      // 设置合并行
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
          const _row = this.setTable(this.hdResultList)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      setTable(tableData) {
        let spanArr = [], concat = 0;
        tableData.forEach((item, index) => {
          if (index === 0) {
            spanArr.push(1);
          } else {
            if (item.pack_name === tableData[index - 1].pack_name) {
              // 第一列需合并相同内容的判断条件
              spanArr[concat] += 1;
              spanArr.push(0);
            } else {
              spanArr.push(1);
              concat = index;
            }
          }
        });
        return spanArr;
      },
    }
  };
</script>
